/**
 * Created by maxiaoqiang on 2018/9/11.
 */
import React, {Component} from "react";

import {TreeSelect, Table, Button, Tag, Divider, message, Popconfirm, Icon} from 'antd';

import "../index.less";

import {HttpClient} from "util/HttpClient";
import ChapterComponent from "component/chapter";

class Chapter extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value:"请选择科目",
            treeData:[],
            editData: null,
            createAndModifyModal: false,
            examSubjectId:"",
            chapterData:[]
        }
    }

    getColumns = ()=> {
        return ( [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    align: "center"
                }, {
                    title: '名称',
                    dataIndex: 'name',
                    align: "center"
                },{
                    title: '权重比',
                    dataIndex: 'percent',
                    align: "center"
                },{
                    title: '状态',
                    dataIndex: 'status',
                    align: "center",
                    render: (text, record) => (
                        <span>
                            {record.status == 0 ? <Tag color="blue">启用</Tag> : ''}
                        </span>
                    )
                }, {
                    title: '操作',
                    key: 'action',
                    align: "center",
                    render: (text, record) => (
                        <span>
                            <a
                                href="javascript:;"
                                onClick={()=>{
                                    this.setState({
                                        editData: record,
                                        createAndModifyModal:true
                                    })
                                }}
                            >
                                修改
                            </a>
                            <Divider type="vertical"/>
                            <Popconfirm
                                title="确定要删除吗？"
                                icon={<Icon type="question-circle" theme="outlined" style={{ color: 'red' }}/>}
                                okText="确定"
                                cancelText="取消"
                                onConfirm={()=>{this.confirmDelete(record.id)}}
                            >
                                <a href="javascript:;">删除</a>
                            </Popconfirm>
                        </span>
                    )
                }
            ]
        )
    };

    confirmDelete=(id)=>{
        HttpClient.post("/v1/chapter/delete?id="+id)
            .then((response)=> {
                if (response.data.code == 200) {
                    message.success("删除成功");
                    setTimeout(()=>{
                        this.initChapterListHandle(this.state.examSubjectId);
                    }, 1000)
                }
            })
    };

    componentDidMount() {
        // 获取类别获取科目
        // this.initListHandle("");
        this.initTreeData();
    }

    handleChange = (value)=> {
        if(value.indexOf("-")>-1){
            this.setState({ value });
            this.setState({
                examSubjectId:value
            });
            this.initChapterListHandle(value.split("-")[1]);
        }else{
            this.setState({ value:"请选择科目" });
        }
    };

    initTreeData=()=>{
        HttpClient.get("/v1/category/categoryandsubject")
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = response.data.data;
                    console.log(data);
                    let treeData = [];
                    for(let i = 0; i<data.length; i++){
                        let data1 = data[i];
                        let parentData = {
                            title: data1.name,
                            value: data1.id+"",
                            key: data1.id+"",
                            children:[]
                        };
                        if(data1.subjectList.length>0){
                            for(let j = 0; j <data1.subjectList.length; j++){
                                let data2  = data1.subjectList[j];
                                let childrenData = {
                                    title: data2.name,
                                    value: data1.id+"-"+data2.id,
                                    key: data1.id+"-"+data2.id
                                };
                                parentData.children.push(childrenData);
                            }
                        }
                        treeData.push(parentData);
                    }
                    this.setState({
                        treeData: treeData
                    })
                }
            });
    };

    // 根据科目ID获取章节内容
    initChapterListHandle=(id)=>{
        HttpClient.get("/v1/chapter/findByChapter?id="+id)
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = [];
                    for (var i in response.data.data) {
                        let newData = response.data.data[i];
                        newData.key = "chapter" + newData.id;
                        newData.percent = newData.percent+"%";
                        data.push(newData);
                    }
                    this.setState({
                        chapterData: data
                    })
                }
            });
    };

    saveHandle = (data)=> {
        let type = data.id==""?"create":"update";
        HttpClient.post("/v1/chapter/"+type,data)
            .then((res)=>{
                this.setState({
                    createAndModifyModal: false,
                    editData: null
                });
                if(res.data.code==200){
                    if(type=="create"){
                        message.success("创建成功")
                    }else if(type == "update"){
                        message.success("修改成功")
                    }else{
                        message.error(res.data.msg)
                    }
                    setTimeout(()=>{
                        this.initChapterListHandle(this.state.examSubjectId.split("-")[1]);
                    }, 1000)
                }
            })
    };

    render() {
        return (
            <div>
                <div className="add-create-btn">
                    <div className="card">
                        <TreeSelect
                            style={{ width: 200 }}
                            value={this.state.value}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            treeData={this.state.treeData}
                            placeholder="请选择科目"
                            treeDefaultExpandAll = {false}
                            onChange={this.handleChange}
                        />
                    </div>
                    <div className="card">
                        <Button
                            type="primary"
                            onClick={()=>{
                                this.setState({
                                    createAndModifyModal: true
                                })
                            }}
                        >
                            添加章节
                        </Button>
                    </div>
                </div>
                {this.state.createAndModifyModal ?
                    <ChapterComponent
                        choose={this.state.examSubjectId}
                        treeData={this.state.treeData}
                        edit={this.state.editData?true:false}
                        data={this.state.editData}
                        commitHandle={this.saveHandle}
                        handleCancel={()=>{
                            this.setState({
                                createAndModifyModal: false
                            })
                        }}
                    />
                    :
                    null
                }
                <Table
                    columns={this.getColumns()}
                    dataSource={this.state.chapterData}
                />
            </div>
        )
    }
}

export default Chapter;